<template>
  <div class="flex1 top-item flex-row-center-between pd10 pointer">
    <div>
      <div>累计故障最多类型和部件</div>
      <div class="mgt20 mgr10">
        <span class="fs20 bold">{{ props.data.totalPartsList?.[0] }}</span>
      </div>
    </div>

    <div class="flex1 flex-column-center-center">
      <div>故障数</div>
      <div class="mgt10 mgr10">
        <span class="bold fs28">{{ props.data.totalFaultCount ?? 0 }}</span>
        <span>个</span>
      </div>
    </div>

    <div>
      <div>占比</div>
      <div class="mgt10 mgr10">
        <span class="fs20 bold fs28">{{ props.data.faultRate ?? 0 }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import type { PropType } from 'vue'
  import type { PartsVO } from '../config'

  const props = defineProps({
    data: {
      type: Object as PropType<PartsVO>,
      default: () => ({})
    }
  })

  /**----------------------------methods----------------------------------------------------------------------- */
</script>

<style scoped lang="less">
  .top-item {
    background: #f6f7fb;
  }
</style>
